<!DOCTYPE html>
<html lang='zh-cn'>
    <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>
    </head>
    <body>
        <h1>只要表单中的一个控件没有name，点击submit就无法验证，只能提交</h1>
        <div class="col-lg-8 col-lg-offset-2">
            <form id="form" role="form" class="form-horizontal" >
                <div class="form-group row">
                    <label for="username" class="col-sm-2 control-label form-control-label">用户名<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input type="text" required rangelength="[4,32]" class="form-control"
                               id="username" name="username">
                        <p class="help-block">用户名为数字或字母，长度4-32位</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="email" class="col-sm-2 control-label form-control-label">邮箱地址<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input type="email" required parsley-type="email" class="form-control"
                               id="email" name="email">
                        <p class="help-block">邮箱将作为资金通知和数据报告通知的重要方式，请认真填写并确保邮箱有效</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="phoneNum" class="col-sm-2 control-label form-control-label">手机号<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input class="form-control"
                               required id="phoneNum" name="phoneNum">
                        <p class="help-block">手机号将作为找回密码等重要通知的方式没请认真填写并确保有效</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="qq" class="col-sm-2 control-label form-control-label">联系QQ<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input type="text" required class="form-control"
                               id="qq" name="qq">
                        <p class="help-block">联系QQ将作为客服与您沟通的方式之一，如若需要请连写您的QQ号码</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="pass1" class="col-sm-2 control-label form-control-label">密码<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input id="pass1" name="pass1" type="password" rangelength="[6,33]" required
                               class="form-control">
                        <p class="help-block">由6-33个英文字母、数字或下划线组成</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox"></div>
                </div>
                <div class="form-group row">
                    <label for="pass2" class="col-sm-2 control-label form-control-label">确认密码<span class="text-required">*</span></label>
                    <div class="col-sm-6">
                        <input id="pass2" name="pass2" type="password"  required rangelength="[6,33]" equalTo="#pass1"
                               class="form-control">
                        <p class="help-block">重复输入密码以确认无误</p>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox"></div>
                </div>
                <div class="form-group row">
                    <label for="checkcode" class="col-sm-2 control-label form-control-label">验证码<span class="text-required">*</span></label>
                    <div class="col-sm-4">
                        <input id="checkcode" name="checkcode" type="password" required
                               class="form-control">
                    </div>
                    <div class="col-sm-2">
                        验证码
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox"></div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6 col-sm-offset-2">
                        <div class="checkbox checkbox-success">
                            <input id="checkbox-signup" type="checkbox" name="checkbox-signup" required>
                            <label for="checkbox-signup">我已阅读并接受《<a href="#">东方联盟注册协议</a>》</label>
                        </div>
                    </div>
                    <div class="col-sm-4 p-t-7 errorBox"></div>
                </div>
                <div class="form-group row mt40 mb40">
                    <div class="text-center col-sm-6 col-sm-offset-2">
                        <input class="btn w-md btn-primary btn-bordered waves-effect waves-light" type="submit" value="提交资料，注册账户">
                    </div>
                </div>
            </form>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/messages_zh.min.js"></script>
        <script>
            $(function(){
                $("#form").validate();
            })
            // $("#form").validate({
                // submitHandler:function(form){
                //     alert("提交");
                //     // form.submit();
                //     // $(form).ajaxSubmit();//ajax方式
                // },
                // errorPlacement:function(error,element){
                //     error.appendTo(element.parent().next());
                // },
                // rules:{
                //     phoneNum:{
                //         required:true,
                //         digits:true,
                //         rangelength:[11,14]
                //     }
                // },
                // messages:{
                //     phoneNum:{
                //         required:'请输入手机号码',
                //         digits:'只能输入数字',
                //         rangelength:'请输入正确的手机号码'
                //     }
                // }
            // })
        </script>
    </body>
</html>